<template>
  <el-card class="template-card-item">
    <div class="template-card-item-info">
      <div class="template-card-item-info-main">
        <h2>{{ getCardNameLabel(cardItem) }}<span>{{ getTypeText(cardItem.type) }}</span></h2>
      </div>
      <el-tooltip class="item" effect="dark" :disabled="!isOverflow" placement="top">
        <div slot="content" class="tips-msg">{{ cardItem.description }}</div>
        <p class="template-card-item-info-desc" ref="parentHeight"><span ref="childHeight">{{ cardItem.description }}</span></p>
      </el-tooltip>
    </div>
    <div class="template-card-item-fields">
      <p>{{$t('event.setting.additional.component.templateCardItem.label1')}}：</p>
      <p>{{ cardItem.fields }}</p>
    </div>
    <div class="template-card-item-footer">
      <el-button type="primary" class="preview btn" @click="previewCard(cardItem)">{{$t('common.base.preview')}}</el-button>
      <el-tooltip class="item" effect="dark" :content="$t('event.setting.additional.component.templateCardItem.tips1')" placement="top">
        <el-button type="primary" class="btn" @click="importcard(cardItem.cardId, 'single')" :loading="loadingSingle">{{$t('event.setting.additional.component.templateCardItem.btn1')}}</el-button>
      </el-tooltip>
      <el-tooltip class="item" effect="dark" :content="$t('event.setting.additional.component.templateCardItem.tips2')" placement="top">
        <el-button type="primary" class="btn" @click="importcard(cardItem.cardId, 'multiple')" :loading="loadingMultiple">{{$t('event.setting.additional.component.templateCardItem.btn2')}}</el-button>
      </el-tooltip>
    </div>
  </el-card>
</template>

<script>
/* constant  */
import { ADDITIONAL_TYPE_TABS } from '../../constant';
/* api */
import * as SettingServiceEventApi from '@src/api/SettingServiceEventApi';
import { CardNameLabelEnum } from '@model/enum/LabelEnum'

export default {
  name: 'template-card-item',
  props: {
    cardItem: {
      type: Object,
      default: () => ({}),
    },
    cardType: {
      type: String,
    },
  },
  watch: {
    cardItem(newValue) {
      if (newValue) {
        this.initOverflow();
      }
    },
  },
  data() {
    return {
      loadingSingle: false,
      loadingMultiple: false,
      isOverflow: false,
    };
  },
  methods: {
    // 获取附加组件标题的多语言label
    getCardNameLabel(item) {
      const { cardName, cardNameLanguage } = item
      const locale = this.$i18n.locale
      return cardNameLanguage?.locale || CardNameLabelEnum[cardName] || cardName
    },
    // 初始化溢出tips
    initOverflow() {
      this.$nextTick(() => {
        this.isOverflow = this.$refs?.parentHeight?.offsetHeight < this.$refs?.childHeight?.offsetHeight;
      });
    },
    getTypeText(type) {
      return (ADDITIONAL_TYPE_TABS.find(tab => tab.type === type) || {})['name'] || '';
    },
    // 预览组件
    previewCard(card) {
      this.$emit('preview', card);
    },
    /* 添加为单次/多次 */
    importcard(cardId, inputType) {
      this.toggleLoading(inputType, true);
      SettingServiceEventApi.addCardWithTemplate({ cardId, inputType })
        .then(res => {
          const { status, message, data } = res;
          if (status == 0) {
            if (this.cardType == 'addCardSet') {
              this.$message.success(this.$t('event.setting.additional.component.templateCardItem.tips3'));

              setTimeout(() => {
                this.$emit('update');
              }, 1000);
            } else {
              this.$emit('update', this.cardItem, inputType, data);
            }
          } else {
            this.$message.error(message);
          }
        })
        .finally(() => {
          this.toggleLoading(inputType, false);
        })
        .catch(err => console.error(err))
    },
    toggleLoading(inputType, toggle) {
      if (inputType == 'single') {
        this.loadingSingle = toggle;
      } else {
        this.loadingMultiple = toggle;
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.template-card-item {
  margin: 0 12px 12px 0;
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.04);
  &:hover {
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.12);
  }

  &-info {
    &-main {
      h2 {
        line-height: 22px;
        margin-bottom: 0;
        @include text-ellipsis;
        font-size: $font-size-large;
        color: $text-color-primary;

        span {
          padding: 0 8px;
          height: 22px;
          line-height: 22px;
          font-size: $font-size-small;
          background: rgba(250, 140, 22, 0.2);
          border-radius: 11px;
          font-weight: 500;
          color: #fa8c16;
          border: 1px solid rgba(250, 140, 22, 0.2);
          text-align: center;
          display: inline-block;
          margin-left: 8px;
        }
      }
    }

    &-desc {
      height: 34px;
      line-height: 17px;
      margin: 8px 0 0;
      font-size: $font-size-small;
      color: $text-color-regular;
      @include text-ellipsis-2;
    }
  }

  &-fields {
    margin: 8px 0 12px 0;

    p {
      height: 20px;
      margin-bottom: 0;
      font-size: $font-size-small;
      color: $text-color-primary;
    }

    :first-child {
      color: $text-color-regular;
      margin-bottom: 2px;
    }
  }

  &-footer {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;

    .btn{
      padding: 4px 6px !important;
      margin-top: 10px;
      & + .btn {
        margin-left: 8px;
      }
    }
  }
}

.tips-msg {
  width: 250px;
}

// @media screen and (max-width: 3000px) {
//   .template-card-item {
//     width: calc(100% / 6 - 12px);
//   }
// }
// @media screen and (max-width: 2400px) {
//   .template-card-item {
//     width: calc(100% / 5 - 12px);
//   }
// }
// @media screen and (max-width: 2025px) {
//   .template-card-item {
//     width: calc(100% / 4 - 12px);
//   }
// }
// @media screen and (max-width: 1575px) {
//   .template-card-item {
//     width: calc(100% / 3 - 12px);
//   }
// }
// @media screen and (max-width: 1350px) {
//   .template-card-item {
//     width: calc(100% / 2 - 12px);
//   }
// }
// @media screen and (max-width: 900px) {
//   .template-card-item {
//     width: calc(100% - 12px);
//   }
// }
</style>
